<!-- 详情 -->
<template>
  <div class="index">
    <div>
      <div class="container" id="container">
        <div class="main-box">
          <div class="banner-box">
            <div class="banner-content">
              <div class="title">新闻详情</div>
              <div class="e-title">News Detail</div>
            </div>
          </div>
          <div class="content">
            <div class="breadcrumb-box">
              <span class="breadcrumb">
                <i class="el-icon-location-outline">位置：</i>
              </span>
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>新闻列表</el-breadcrumb-item>
                <el-breadcrumb-item>详情</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <div class="content-detail">
              <div class="title">
                {{ briefing.briefingName }}
              </div>
              <div class="date">{{ briefing.createTime }}</div>
              <div class="line"></div>
              <div class="detail">
                <iframe
                  :src="briefing.fileUrl"
                  width="100%"
                  height="800px"
                ></iframe>
              </div>
              <template></template>
            </div>
          </div>
        </div>
        <div class="footer">锦州铁源实业集团版权所有</div>
      </div>
    </div>
  </div>
</template>

<script>
import navHeader from "@/views//header";
import navFooter from "@/views//footer";
import { getToken } from "@/utils/auth";
import { mapGetters } from "vuex";
import { getBriefing } from "../api/system/briefing";

export default {
  name: "index-detail",
  components: {
    navHeader,
    navFooter,
  },

  data() {
    return {
      id: this.$route.query.id,
      briefing: {},
      form: {
        id: null,
        title: "",
        content: "",
        introduction: "",
        contentMarkdown: "",
        createTime: "",
      },
    };
  },
  computed: {
    ...mapGetters(["introduction"]),
    hasToken() {
      return !!getToken();
    },
  },
  created() {
    this.showDetail();
  },
  methods: {
    showDetail() {
      getBriefing(this.id).then((res) => {
        this.briefing = res.data;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.banner-box {
  width: 100%;
  height: 330px;
  background: url("../assets/images/banner.png");

  .banner-content {
    width: 1200px;
    margin: 0 auto;
    padding-top: 90px;
  }

  .title {
    font-size: 40px;
    color: white;
  }

  .e-title {
    font-size: 14px;
    color: white;
  }
}

.content {
  width: 1200px;
  margin: 0 auto;
  min-height: 400px;

  .breadcrumb {
    font-size: 14px;
    font-weight: 700;
    color: #4e4e4e;
  }

  .breadcrumb-box {
    display: flex;
    align-items: center;
    margin: 25px 0;
  }

  .content-detail {
    .title {
      font-size: 24px;
      color: #4b4a4a;
      text-align: center;
    }

    .date {
      font-size: 14px;
      color: #b3b3b3;
      text-align: center;
      margin: 15px 0;
    }

    .line {
      width: 100%;
      height: 1px;
      background: #c8cccd;
    }

    .detail {
      padding: 15px 0;
      font-size: 14px;
      color: #727272;
      line-height: 24px;
      text-align: center;
      height: 900px;
    }
  }
}

.header {
  z-index: 100;
  width: 100%;
  height: 85px;
  background: rgba($color: #00135d, $alpha: 1);
  position: sticky;
  top: 0;
}
.footer {
  width: 100%;
  height: 47px;
  background: #585c60;
  text-align: center;
  margin-top: 17px;
  line-height: 47px;
  font-size: 14px;
  color: white;

  z-index: 9;

}
</style>
